/**
 * Paging
 */

 var React = require("react");
 var Paging = React.createClass({
    getInitialState: function (){
        return {
            pagings: []
        }
    },
    getInitialProps: function (){
        return {
            data: [],
            opts: {},
            parent: {}
        }
    },
    componentWillMount: function (){
        var defaultOpts = {
            perpage: 8,
            pageRange: 5
        };

        this.data = this.props.data;
        this.opts = $.extend({}, defaultOpts, this.props.opts);
        this.pageIndex = 1;
        this.totalPage = Math.ceil(this.data.length / this.opts.perpage);

        this.changePageIndex(this.pageIndex);
    },
    handleOnPrevPage: function (){
        if (this.pageIndex > 1){
            this.changePageIndex(--this.pageIndex);
        }
    },
    handleOnNextPage: function (){
        if (this.pageIndex < this.totalPage){
            this.changePageIndex(++this.pageIndex);
        }
    },
    handleOnGoToFirstPage: function (){
        this.changePageIndex(this.pageIndex = 1);
    },
    handleOnGoToLastPage: function (){
        this.changePageIndex(this.pageIndex = this.totalPage);
    },
    handleOnChangePage: function (e){
        var element = $(e.target || e.srcElement),
            index = element.attr("data-index");
        this.changePageIndex(index);
    },
    changePageIndex: function (index){
        this.pageIndex = index = index || 1;

        var perpage = this.opts.perpage,
            start = (index - 1) * perpage,
            end = index * perpage - 1;

        if (end > this.data.length - 1){
            end = this.data.length - 1;
        }

        for (var i=start, l=end, curData=[]; i<=l; i++){
            curData.push(this.data[i]);
        }

        this.createPagings();

        var parent = this.props.parent;
        parent.updateState("curTemplates", curData);
    },
    createPagings: function (){
        var pageIndex = this.pageIndex,
            totalPage = this.totalPage,
            pageRange = this.opts.pageRange,
            multi = Math.ceil(pageIndex / pageRange),
            end = pageRange * multi,
            start = end - pageRange + 1;

        if (end > totalPage){
            end = totalPage;
        }

        if (start < 1){
            start = 1;
        }

        for (var i=start, l=end, curData=[]; i<=l; i++){
            curData.push({
                index: i
            });
        }

        this.setState({
            pagings: curData
        });
    },
    render: function (){
        var length = this.state.pagings.length;
        var totalWidth = length > 5 ? 5*35 : length *35;
        return (
            <div className="footer_pag">
                <ul>
                    <li onClick={this.handleOnGoToFirstPage} className="glyphicon glyphicon-step-backward page_jump"></li>
                    <li onClick={this.handleOnPrevPage} className="glyphicon glyphicon-menu-left page_jump"></li>
                    <li className="pages" style={{ width: totalWidth +'px'}}>
                        <div className="paging">
                        {
                            this.state.pagings.map(function (item){
                                return (
                                    <div data-index={item.index} key={item.index} className={"page-action " + (this.pageIndex == item.index ? "activepage" : "")} onClick={this.handleOnChangePage}>{item.index}</div>
                                )
                            }.bind(this))
                        }
                        </div>
                    </li>
                    <li onClick={this.handleOnNextPage} className="glyphicon glyphicon-menu-right page_jump"></li>
                    <li onClick={this.handleOnGoToLastPage} className="glyphicon glyphicon-step-forward page_jump"></li>
                </ul>
            </div>

        )
    }
 });

 module.exports = Paging;
